import * as React from 'react';
import {Component} from 'react';
import {Form, Table, /*Icon, */Divider} from 'antd';
import {ColumnProps} from 'antd/lib/table';
import {withWrapper} from '../../components/basic';
import {Link} from 'react-router-dom';
import * as moment from 'moment';
import {Type, Status, Level} from '../../enum/user';

const renderTime = (text: string) => text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '';

const columns: Array<ColumnProps<Table.Data>> = [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
    fixed: 'left',
}, {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
    width: 150,
    fixed: 'left',
}, {
    title: '昵称',
    dataIndex: 'nick_name',
    width: 200,
    key: 'nick_name',
}, {
    title: '头像',
    dataIndex: 'avatar',
    width: 85,
    key: 'avatar',
    render: (src: string) => (
        <div style={{height: 50}}>
            <img src={src} style={{width: 50, height: 50}} alt=""/>
        </div>
    ),
}, {
    title: '电话号码',
    dataIndex: 'phone',
    width: 160,
    key: 'phone',
}, {
    title: '邮箱',
    dataIndex: 'email',
    width: 250,
    key: 'email',
}, {
    title: '软妹币',
    dataIndex: 'coin',
    width: 100,
    key: 'coin',
}, {
    title: '级别',
    dataIndex: 'level',
    width: 80,
    key: 'level',
    render: (text: string) => text ? Level[text] : ''
}, {
    title: '工作',
    width: 200,
    dataIndex: 'jobs',
    key: 'jobs',
}, {
    title: '用户状态',
    width: 100,
    dataIndex: 'status',
    key: 'status',
    render: (text: string) => {
        const t = text ? Status[text] : ''

        if (t === '正常') {
            return <span style={{color: '#0bd158'}}>{t}</span>
        }
        return <span style={{color: '#f93343'}}>{t}</span>

    }
}, {
    title: '用户类型',
    width: 150,
    dataIndex: 'type',
    key: 'type',
    render: (text: string) => text ? Type[text] : ''
}, {
    title: '第三方账户ID',
    width: 150,
    dataIndex: 't_third_id',
    key: 't_third_id',
},{
    title: '第三方账户厂家',
    width: 150,
    dataIndex: 't_provider',
    key: 't_provider',
    render: (text: string) => <span style={{color: '#e33c64'}}>{text}</span>
},{
    title: '注册时间',
    width: 200,
    dataIndex: 'add_time',
    key: 'add_time',
    render: renderTime,
}, {
    title: '用户最后一次更新时间',
    width: 200,
    dataIndex: 'update_time',
    key: 'update_time',
    render: renderTime,
}, {
    title: '系统最后一次更新时间',
    width: 200,
    dataIndex: 'system_update_time',
    key: 'system_update_time',
    render: renderTime,
}, {
    title: '操作',
    width: 150,
    fixed: 'right',
    key: 'action',
    render: (text: string, record: any) => (
        <span>
            <Link to={`/user/list/edit/${record.id}`}> 编辑</Link>
            <Divider type="vertical"/>
            <a href="javascript:;">删除</a>
        </span>
    ),
}];


class WrapperTable extends Component<any, {}> {
    public render(): any {
        const {onPageChange, datas, pager} = this.props;

        return (
            <Table
                rowKey="id"
                bordered={true}
                dataSource={datas}
                columns={columns}
                pagination={pager}
                scroll={{
                    x: columns.reduce((total: number, val: any): number => {
                        return total + val.width;
                    }, 0)
                }}
                onChange={onPageChange}
            />
        )
    }
}

export default withWrapper(Form.create()(WrapperTable));
